<template>
  <div class="index">
    <!-- 顶栏数据统计区 -->
    <el-card class="box_card">
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <el-statistic :precision="2" :value="formattedTotal" title="总金额">
              <template slot="prefix">
                <i class="iconfont icon-qianbao" style="color: #22a0ff"></i>
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic title="车辆总记录">
              <template slot="formatter">
                <i class="iconfont icon-a-cheliang3" style="color: #ffa500"></i>
                {{ count.car_info_count }}
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic
              decimal-separator="."
              :value="vipformat"
              title="会员总数"
            >
              <template slot="prefix">
                <i class="iconfont icon-huiyuan" style="color: red"></i>
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic title="订单总数" :value="orderformat">
              <template slot="prefix">
                <i
                  class="iconfont icon-dingdanzongshu"
                  style="color: #cccccc"
                ></i>
              </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <div class="map_box">
      <el-card>
        <!-- 地图数据展示区 -->
        <div class="map_data" ref="map_data"></div>
        <div class="bar">
          <el-date-picker
            v-model="bartime"
            type="date"
            placeholder="选择日期"
            class="barpicker"
            value-format="yyyy-MM-dd"
            @change="timesear()"
          >
          </el-date-picker>
          <!-- 金额流水柱状图展示区 -->
          <div class="bar_data" ref="bar_data"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "../assets/js/china";
export default {
  data() {
    return {
      count: {}, //统计数据对象
      mapdict: {}, //地图数据对象
      zoom: 1.2, //地图缩放比
      bartime: "", //日期选择
      barcolors: [
        "#4e62ab",
        "#87d0a5",
        "#f7fbae",
        "#fee99a",
        "#fbb969",
        "#f47646",
        "#d53f4d",
      ], // 柱状图颜色
      //柱形图数据,当没有数据时配置假数据
      barval: {
        "2023-10-08": 1800,
        "2023-10-09": 0,
        "2023-10-10": 900,
        "2023-10-11": 600,
        "2023-10-12": 3900,
        "2023-10-13": "300",
        "2023-10-14": "3300",
      },
    };
  },

  mounted() {
    this.getcountdata(); //获取统计栏数据
    this.getcarinfo(); // 获取各地区车辆记录信息
    this.funbarinfo(); //获取柱状图数据
  },
  computed: {
    formattedTotal() {
      return parseInt(this.count.total_count); // 将 金额转换成整数
    },
    vipformat() {
      return parseInt(this.count.vip_count);
    },
    orderformat() {
      return parseInt(this.count.order_count);
    },
  },
  methods: {
    // 获取统计信息
    getcountdata() {
      this.$getapi("/stats/count", "")
        .then((res) => {
          if (res.code === 200) {
            this.count = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          thsi.$message.error(error);
        });
    },
    // 获取各地区车辆记录信息
    getcarinfo() {
      this.$getapi("/stats/province", "")
        .then((res) => {
          if (res.code === 200) {
            this.mapdict = res.data;
            this.mapdata(); //获取地图数据
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },
    // 地图可视化
    mapdata() {
      var china_chart = echarts.init(this.$refs.map_data);
      // 静态的数据，数据的格式和饼图的一致。
      const transformedData = Object.keys(this.mapdict).map((key) => ({
        name: key,
        value: this.mapdict[key], // 根据需要进行数值转换
      }));

      var data = transformedData; //添加地图数据例:[{name:'广西',value:100}]
      var option = {
        title: {
          text: "车辆记录地区分布统计",
          left: "center",
          textStyle: {
            fontSize: 16,
            align: "center",
          },
        },
        tooltip: {
          // 自定义弹窗
          formatter: "{a}<br>{b}:{c}", //{a}: 系列中的name的属性值。{b}系列中具体的数据的内容。{c}：内容对应的值,如果存在多个系列。
          //使用函数  将系列中的
          // 鼠标引入省份,不断触发.params 对象.当前省份的信息.
          formatter: function (params) {
            var value = params.value;
            if (isNaN(value)) {
              value = 0;
            }
            return params.seriesName + "<br>" + params.name + ":" + value;
          },
        },
        // 视觉映射组件，负责地图的颜色的配置。
        visualMap: [
          {
            // 组件的类型，连续的
            type: "continuous",
            // 不连续的
            type: "piecewise",
            // 自定义颜色块区间
            pieces: [
              {
                min: 101,
                label: ">100",
                color: "orange",
              },
              {
                min: 25,
                max: 100,
                label: "25-100",
                color: "#e6ac53",
              },
              {
                min: 16,
                max: 25,
                label: "16-25",
                color: "#9feaa5",
              },
              {
                min: 6,
                max: 15,
                label: "6-15",
                color: "#85daef",
              },
              {
                min: 1,
                max: 5,
                label: "1-5",
                color: "#9fb5ea",
              },
              // 单独的一个值。
              {
                value: 0,
                label: "0",
                color: "#eee",
              },
            ],
            // 取值的最小值
            min: 0,
            //最大值。
            max: 250,
            itemWidth: 25,
            itemHeight: 15,
            // 组件两端的文本。
            // text:["高","低"],
            // 指定取哪个系列的数据，即哪个系列的 series.data。
            seriesIndex: [0],
            // 组件的颜色的范围。
            inRange: {
              color: [
                "orange",
                "red",
                "#e6ac53",
                "#9fb5ea",
                "#85daef",
                "#9feaa5",
                "#9fb5ea",
              ],
            },
            // 组件的排列方式
            // orient:"horizontal",
            // 默认垂直布局
            orient: "vertical",
          },
        ],
        //地图的核心区域
        geo: {
          //地图的类型
          map: "china",
          //缩放比例
          zoom: 1.25,
          //地图上的文字
          label: {
            fontSize: 10,
            show: true,
          },
          //高亮选中
          emphasis: {
            label: {
              show: true,
            },
            itemStyle: {
              areaColor: "#ccc",
            },
          },
        },
        //系列
        series: [
          {
            name: "中国",
            type: "map",
            geoIndex: 0,
            data: data,
          },
        ],
      };
      //渲染视图
      china_chart.setOption(option);
    },
    // 封装获取柱状图数据
    funbarinfo(parameter) {
      this.$getapi("/total/bar/get", parameter, "json")
        .then((res) => {
          if (res.code === 200) {
            this.barval = res.data;
            this.bardata(); //显示柱状图
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },
    // 获取金额流水柱状图数据
    bardata() {
      // 获取数据
      const data = this.barval;

      // 将数据转换为ECharts所需的格式
      const xAxisData = Object.keys(data);
      const seriesData = Object.values(data);

      // 创建图表实例
      const bar = echarts.init(this.$refs.bar_data);

      // 配置图表选项
      const options = {
        title: {
          text: "每日总金额柱状图",
          left: "center",
          textStyle: {
            fontSize: 16,
          },
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            formatter: function (value) {
              // 自定义日期格式，示例：2021-10-11
              return value.split("-").join("-");
            },
          },
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis", //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: '日期：{b} <br />金额：{c}元'
        },

        series: [
          {
            type: "bar",
            data: seriesData,
            itemStyle: {
              barBorderRadius: 5,
              barBorderBottom: 0,
              borderWidth: 1,
              borderType: "solid",
              borderColor: "rgba(0,0,0,.5)",
              shadowColor: "#5470c6",
              shadowBlur: 3,
              color: (params) => {
                return this.barcolors[params.dataIndex % this.barcolors.length];
              },
            },
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              formatter: "{c}元", // 标签内容格式化
            },
          },
        ],
      };

      // 渲染图表
      bar.setOption(options);
    },
    // 根据日期搜索记录
    timesear() {
      let par = {
        time: this.bartime,
      };
      this.funbarinfo(par);
    },
  },
};
</script>

<style lang="less" scoped>
.index {
  width: 100%;
  height: 100%;
  .map_box {
    margin-top: 10px;
    padding-bottom: 10px;
    .map_data {
      margin-top: 10px;
      width: 100%;
      height: 510px;
    }
    .bar {
      margin-top: 200px;
      .barpicker {
        margin-bottom: 10px;
        margin-left: 6%;
      }
      .bar_data {
        width: 100%;
        min-height: 505px;
      }
    }
  }
}
</style>